<template>
  <div class="mt-20 mr-20">
    <el-card class="order-item">
      <el-descriptions
          :title="$t('pageStr.sysInfoAccessGrpStr')"
          :column="2"
          size="large"
          border
          style="max-width: 700px"
      >
        <el-descriptions-item width="200px" :label="$t('pageStr.serialNumberStr')" :span="3">
          {{ systemInfo.serialNumber }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('pageStr.hostNameStr')" :span="3">{{ systemInfo.hostName }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('pageStr.softVersionStr')" :span="3">
          {{ systemInfo.firewareVersion + '_' + systemInfo.firewareVersionTime }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('pageStr.hardVersionStr')" :span="3">{{ systemInfo.hardVersion }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('pageStr.localTimeStr')" :span="3">{{ systemInfo.localTime }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
import {onBeforeMount, ref, onBeforeUnmount} from 'vue'
import {reqGetIndex} from '@/api/index'
import {useRouter} from 'vue-router'
import {localGet} from "@/utils";

const router = useRouter()
const systemInfo = ref({})
let timer = null
onBeforeMount(() => {
  const user = localGet('token')
  console.log('登录用户信息', user)
  getData()
  timer = setInterval(getData, 1000 * 10)
})


function getData() {
  reqGetIndex().then((res) => {
    systemInfo.value = res.systemInfo
  })
}

onBeforeUnmount(() => {
  timer && clearInterval(timer)
})
</script>

<style scoped>
.introduce .order {
  display: flex;
  margin-bottom: 50px;
}

.introduce .order .order-item {
  flex: 1;
  margin-right: 20px;
}

.introduce .order .order-item:last-child {
  margin-right: 0;
}
</style>